body {

}

.box {
    background-color: #f2f3f5;
    border: 2px solid #d9d9e0;
    width: 300px;
    height: 300px;
    display: flex; /*项目默认沿主轴排序*/
    /* flex-direction: column;/*主轴的方向，row左起水平（默认），row-reverse右起水平，column上起垂直*/
    /*justify-content: space-around; /*定义了项目在主轴上的对齐方式，项目就是容器里面的元素，主轴是横向的那根.属性：center居中，flex-start左对齐(默认)，flex-end右对齐，space-between两边对齐，space-around每个项目两侧的间隔相等*/
    /* align-items: center; /*项目在交叉轴上的对齐方式,stretch（默认）如果项目没有设置高度或者设为auto，则项目将站满容器的高度，baseline项目的第一行文字对齐,center,flex-start,flex-end*/
    flex-wrap: wrap;
    align-content: space-between; /*当有换行的时候才有用，是交叉轴上的变化，*/
}

.column {
    /* flex-direction: column;*/
   flex-basis: 100%; /*在分配多余空间之前，项目占据主轴的空间*/
   display: flex;
    justify-content: space-between;
}

/*.olumn:nth-child(2) {
    justify-content: center;} /*把第二个column的justify-content的值设置为center*/


.item {
    background-color: #8ccaee;
    width: 60px;
    height: 60px; /*如果不设置或者auto的话是没有高度的.所以当align不设置或者stretch的时候，项目高度站满容器高度，如果height没有设置又设置了项目的alight-items为其它的时候是没有显示的，因为项目没有高度！*/
}

/*.item:nth-child(1) { /*第二个容器*/
/*  align-self: flex-start;
  /*覆盖容器的align-items，*/
/*}*/

/*.item:nth-child(4) { /*第二个容器*/
/*   align-self: flex-end;
   /*覆盖容器的align-items，*/
/*}*/

.text {
    background-color: #8ccaee;
    width: 30px;
    height: 30px;
}






































